<template>
<div>
    <el-button class="add-btn" type="primary" @click="clickAdd" size="mini">添加规格参数组</el-button>
    <el-table
            ref="singleTable"
            :data="groupData"
            stripe
            border
            @current-change="handleCurrentChange"
            style="width: 100%">
        <el-table-column
                type="index"
                label="#"
                align="center"
                width="100">
        </el-table-column>

        <el-table-column
                align="center"
                property="name"
                label="组名"
                min-width="200">
        </el-table-column>

        <el-table-column label="操作" min-width="300" align="center">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑组</el-button>
                <el-button
                        size="mini"
                        @click="handleParam(scope.row)">规格参数</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteGroup(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <!--编辑对话框-->
    <el-dialog
            title="编辑组"
            :visible.sync="editDialogVisible"
            width="50%"
            @close="editDialogClosed"
            :close-on-click-modal=false>
        <!--内容主体区-->
        <el-form :model="editForm" label-width="70px" ref="addFormRef">
            <el-form-item label="组名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>
        </el-form>
        <!--底部-->
        <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editGroup">确 定</el-button>
  </span>
    </el-dialog>
    <!--添加对话框-->
    <el-dialog
            title="添加组"
            :visible.sync="addDialogVisible"
            width="50%"
            @close="addDialogClosed"
            :close-on-click-modal=false>
        <!--内容主体区-->
        <el-form :model="addForm" label-width="70px" ref="addFormRef">
            <el-form-item label="组名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
        </el-form>
        <!--底部-->
        <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addGroup">确 定</el-button>
  </span>
    </el-dialog>
</div>
</template>

<script>
    export default {
        name: "SpecGroup",
        props:['groupData','cid'],
        data(){
            return{
                currentRow: null,
                editDialogVisible:false,
                addDialogVisible:false,
                editForm:{},
                currentId:'',
                addForm:{
                    name:''
                },

            }
        },
        methods:{
            handleCurrentChange(val) {
                this.currentRow = val;
            },
            handleParam(row){
                this.currentId = row.id
                this.$emit('showParam',this.currentId);
                this.$emit('getParamData')
            },
            clickAdd(){
                if (this.cid==null||this.cid===''){
                    this.$message.error("请选择商品类目!")
                    return
                }
                this.addDialogVisible = true
            },
            async addGroup(){
                let req = {
                    name:this.addForm.name,
                    cid:this.cid
                }
                const res = await this.$http.post("/item/spec/addOrEditSpecGroup",req)
                if (res.data.code !== "200") {
                    return this.$message.error('新增失败')
                }
                this.$emit('getGroupList');
                this.addDialogVisible = false
            },
            async handleEdit(row) {
                this.currentId = row.id
                this.editDialogVisible = true
                const res = await this.$http.get("/item/spec/getGroupById/"+this.currentId)
                if (res.data.code !== "200") {
                    return this.$message.error('获取失败！错误码:' + res.data.code)
                }
                this.editForm = res.data.data
            },
            async editGroup(){
                let req = {
                    name:this.editForm.name,
                    id:this.currentId
                }
                const res = await this.$http.post("/item/spec/addOrEditSpecGroup",req)
                if (res.data.code !== "200") {
                    return this.$message.error('更新失败')
                }
                this.$emit('getGroupList');
                this.editDialogVisible = false
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            //监听对话框的关闭事件
            editDialogClosed() {
                // this.$refs.addFormRef.resetFields()
                this.editForm.name=''
            },
            addDialogClosed(){
                 this.$refs.addFormRef.resetFields()
                // this.addForm.name=''
            },
            deleteGroup(row){
                this.$confirm('此操作将永久删除分组, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http.get("/item/spec/delSpecGroup/" + row.id)
                    if (res.data.code !== "200") {
                        return this.$message.error('删除失败！错误码:' + res.data.code)
                    }
                    this.$emit('getGroupList');
                    this.$message.success('删除成功！')
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },

    }
</script>

<style scoped>
    .add-btn{
        float: right;
        margin-right: 40px;
        margin-bottom: 15px;
    }
</style>
